<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- 引入样式 -->
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript" src="../js/axios.min.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <meta charset="UTF-8">
    <title>评审人员</title>
    <div id="app">
        <h2>{{ message }}</h2>
    </div>
    <div id="tableView" >
        <el-row >
            <el-form :inline="true" :model="searchForm" class="demo-form-inline">
                <el-form-item label="搜索评议人员姓名">
                    <el-input v-model="searchForm.name" placeholder="题目"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="searchClick">查询</el-button>
                    <el-button type="success" icon="el-icon-plus" @click="addClick">新增</el-button>
                </el-form-item>
            </el-form>
        </el-row>

            <!-- from表单-->
        <el-dialog title="编辑人员" :visible.sync="editFormVisible" :close-on-click-modal="false" >
            <el-form :model="editForm" label-width="80px"  label-position="center" :rules="editFormRules" ref="editForm">
                <el-form-item label="账号" prop="number" >
                    <el-input v-model="editForm.number" :disabled="a" @blur="selSnumber" auto-complete="off"  ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="editForm.password" :disabled="a" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="姓名" prop="name">
                    <el-input v-model="editForm.name"  :disabled="a" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="手机" prop="pnumber">
                    <el-input v-model="editForm.pnumber" :disabled="a" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email" :disabled="a" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item label="所属类型" prop="tid">
                    <el-select v-model="editForm.tid" placeholder="请选择" :disabled="a">
                        <el-option
                                v-for="item in types"
                                :key="item.id"
                                :label="item.tname"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer" >
                <el-button @click.native="editFormVisible = false" @click="resetForm('editForm')" >取消</el-button>
                <el-button type="primary" @click.native="editSubmit('editForm')" :loading="editLoading" :disabled="a">提交</el-button>
            </div>
        </el-dialog>
        <!-- from表单   End-->
        <!-- -->
        <el-row type="flex" class="row-bg" justify="center" >
            <el-table
                    v-loading.body="loading"
                    border
                    :data="tableData"
                    style="width:100%">
                <el-table-column
                        type="index"
                        label="编号"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="姓名"
                        width="120">
                </el-table-column>
                <el-table-column
                        prop="tname"
                        label="所属类型"
                        width="120">
                </el-table-column>
                <el-table-column
                        label="操作">
                    <template scope="scope">
                        <el-button type="primary" plain v-if="scope.row.state=='2'"   icon="el-icon-check"  @click="lookClick( scope.row)">查看</el-button>
                        <el-button type="success" plain v-if="scope.row.state=='1   '"  icon="el-icon-edit" @click="editClick( scope.row)">编辑</el-button>
                        <el-button type="danger" plain v-if="scope.row.state=='1'"  icon="el-icon-delete" @click="deleteClick( scope.row)">删除</el-button>
                        <el-button type="success" plain v-if="scope.row.state=='2'"  icon="el-icon-delete" @click="chooseClick( scope.row)">完成</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-row>
        <!-- 列表  End-->
        <!-- 底部工具栏-->
        <el-row style="margin-top: 20px" type="flex" justify="end">
            <!-- <el-col :span="6" >
                <el-button :plain="true" type="danger" size="small" icon="delete" @click="removeSelection">删除所选</el-button>
            </el-col> -->
            <el-col :span="18" >
            <el-pagination
                    style="float: right"
                    @size-change="pageSizeChange"
                    @current-change="currentPageChange"
                    :current-page="currentPage"
                    :page-sizes="[5, 10, 20]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-col>
        </el-row>
    </div>
</head>
<body>
    <script>
        var head=new Vue({
            el:'#app',
            data:{
                message:'评议人员'
            }
        })
        //页面主题
        var table=new Vue({
            el:'#tableView',

            data:{
                tableData:[],
                loading:false,
                a:true,
                searchForm:{
                    name:'',
                },
                //表单隐藏
                editFormVisible: false,
                editLoading: false,
                //当前页
                currentPage:1,
                //分页大小
                pageSize:5,
                //总记录数
                total:1000,
                //删除的弹出框
                deleteVisible:false,
                //编辑界面是否显示
                editFormVisible: false,
                editForm:{
                    number:'',
                    password:'',
                    name :'',
                    pnumber:'',
                    email:'',
                    tid:'',
                },
                types:[],
                /*验证规则*/
                editFormRules:{
                    name: [
                        { required: true, message: '请输入评议人姓名', trigger:'blur' }
                    ],
                    number: [
                        { required: true, message: '请输入账号', trigger:'blur' }
                    ],
                    password:[
                        { required: true, message: '请输入密码', trigger: 'blur' }
                    ],
                    pnumber:[
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { min: 11, message: '请输入不少于11个数字', trigger: 'blur' },
                        { pattern: /^[1][3,4,5,7,8][0-9]{9}$/, message: '联系电话不能为空&长度只能为11位' }
                    ],
                    email:[
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { pattern: /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确的邮箱格式' }
                    ],
                }
            },
            created:function () {
                var self=this;
                var start =(this.currentPage-1)*this.pageSize;
                var end =this.pageSize;
                axios.post( "/appraiser/list",{'start':start,'pageSize':this.pageSize}).then(function (response) {
                    self.total=response.data.total;
                    self.tableData=response.data.data;
                    self.types=response.data.types;
                })
            },
            methods: {

                loadingData:function(){
                    var self=this;
                    self.loading=true;
                    var start=(this.currentPage-1)*this.pageSize;
                    var end=this.pageSize;
                    var serachFrom={'start':start,"pageSize":this.pageSize,"name":this.searchForm.name};
                    axios.post("/appraiser/list",serachFrom).then(function (response) {
                        self.total=response.data.total;
                        self.tableData=response.data.data;
                        self.types=response.data.types;
                    })
                    setTimeout(function(){
                        console.info("加载数据成功");
                        self.loading = false;
                    },300);
                },
                //查询
                searchClick:function() {
                    var self = this;
                    self.loadingData();//重新加载数据
                },
                //新增
                addClick:function () {
                    this.a=false;
                    this.editForm={
                        number:'',
                        password:'',
                        name:'',
                        pnumber:'',
                        email:'',
                        tid:'',
                    }
                    this.goUrl="/appraiser/insert";
                    var _self = this;
                    this.editFormVisible = true;//弹出层，让隐藏的弹出层显示
                    _self.loadingData();//重新加载数据
                },
                //取消事件
                resetForm:function(editForm) {
                    this.$refs[editForm].resetFields();
                },
                //end
                editSubmit:function(editForm){
                    //this.$refs[editForm].validate(function(valid){
                    this.$refs[editForm].validate((valid) => {
                        if (valid) {
                            // alert('submit!');
                            var _self = this;
                            _self.loading = true;
                            var formData =this.editForm;
                            //alert(formData);
                            var goUrl=this.goUrl;
                            //alert(goUrl);
                            //alert(JSON.stringify(formData));
                            axios.post(goUrl,formData).then(function(response){
                                // console.log(response.data);
                                // self.total=response.data.total;
                                if(response.data>0){
                                    _self.editFormVisible = false;// 让弹出层隐藏
                                    _self.loadingData();//重新加载数据
                                }
                            })
                            console.info(this.editForm);
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                /* 删除当前行*/
                editClick:function(row){
                    this.goUrl="/appraiser/update";
                    this.editFormVisible = true;
                    this.editForm = Object.assign({},row);
                }, /* 删除当前行 End*/
                deleteClick:function(row){
                    var self=this;
                    this.$confirm("确认删除吗",{
                        type:'warning',
                        
                    }).then(function () {
                        var  url="/appraiser/del/"+row.id;
                        axios.get(url).then(function (response) {
                            if (response.data>0){
                                self.$message({
                                    message:'删除成功',
                                    type: 'success'
                                });
                                self.loadingData();//重新加载数据
                            }
                        })
                    })
                },
                /* 删除当前行 End*/
                // 评议完成
                chooseClick:function(row){
                    var self=this;
                    this.$confirm("确认评议已完成吗",{
                        type:'warning',

                    }).then(function () {
                        var  url="/appraiser/upstate/"+row.id;
                        axios.get(url).then(function (response) {
                            if (response.data>0){
                                self.$message({
                                    message:'修改成功',
                                    type: 'success'
                                });
                                self.loadingData();//重新加载数据
                            }
                        })
                    })
                },
                // 评议完成
                /* 查看*/
                lookClick:function(row){
                    this.a=true;
                    this.goUrl="/appraiser/list";
                    this.editFormVisible=true;
                    this.editForm=Object.assign({},row);
                    },
                /* 查看  End*/
                /* 编辑页面*/
                editClick:function(row){
                    this.a=false;
                    this.goUrl="/appraiser/update";
                    this.editFormVisible=true;
                    this.editForm=Object.assign({},row);
                },
                /* 编辑页面*/
                getTime(date){
                    this.time=date;
                    console.log(this.time);
                },
                pageSizeChange:function(val) {
                    console.log('每页 ' + val +' 条');
                    this.pageSize = val;
                    var _self = this;
                    _self.loadingData();//重新加载数据
                },
                currentPageChange:function(val) {
                    this.currentPage = val;
                    console.log('当前页: ' + val);
                    var _self = this;
                    _self.loadingData();//重新加载数据
                },
                /* 唯一性验证*/
                selSnumber:function(){
                    var url='/appraiser/list';
                    var start=(this.currentPage-1)*this.pageSize;
                    var end=this.pageSize;
                    var self=this;
                    var serachFrom={'start':start,"pageSize":this.pageSize,"number":this.editForm.number};
                    axios.post(url,serachFrom).then(function(response){
                       console.log(response.data.size);
                          /*  size 状态  0 未注册 不存在于数据库中
                            大于等于1 已注册 该账号不可用*/
                        if(response.data.size==0){
                            self.$message({
                                message: '账号可以添加',
                                type: 'success'
                            });
                        }else{
                            if(response.data.size==1){
                                self.editForm.number='';
                                self.$message({
                                    message: '账号已经存在',
                                    type: 'warning'
                                });
                            }
                        }
                    })
                },
                /* 唯一性验证*/
                getTime(date){
                    this.time = date;
                    console.log(this.time);
                }
            }
        })
    </script>

</body>
</html>